<template>
	<view class="margin">
		<uni-nav-bar :fixed="true" left-icon="back"  :border="false"backgroundColor="#f9f2ea" leftText="地址详情" :statusBar="true" @clickLeft="goBack"></uni-nav-bar>
		<view class="form">
			<view class="row flex">
				<view class="label">
					收货人
				</view>
				<input class="input" type="text" v-model="name" placeholder="请输入收货人姓名" value="" />
			</view>
			<view class="row flex">
				<view class="label">
					手机号码
				</view>
				<input class="input" type="text" v-model="phone" placeholder="请输入手机号码" value="" />
			</view>
			<view class="row flex">
				<view class="label">
					所在地区
				</view>
				<view class="grow" @click="openAddres2" :class="{'unchoose':pickerText=='所在地区'}">
					{{pickerText}}
				</view>
			</view>
			<view class="row flex">
				<view class="label">
					详细地址
				</view>
				<input class="input" type="text" v-model="address" placeholder="请输入详细地址" value="" />
			</view>
			<view class="row flex-between">
				<view class="label">
					设为默认地址
				</view>
				<view>
					<switch style="transform:scale(0.6)" v-if="!acquiesce" @change="switchChange" />
					<switch style="transform:scale(0.6)" v-if="acquiesce" checked @change="switchChange" />
				</view>
			</view>
		</view>
		<view class="add" @click="save">
			保存
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import { addressDetail, addAddress, editAddress } from "@/api/public.js"
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		 data() {
			return {
				id: "",
				name: "",
				phone: "",
				address: "",
				pickerValueDefault: [0, 0, 1],
				provinceCode: "",
				cityCode: "",
				areaCode: "",
				pickerText: "所在地区",
				acquiesce: true,
			}
		},
		onLoad(obj){
			if(obj.data != "undefined"){
				if(obj.id>0){
					return
				}
				var data = JSON.parse(obj.data)
				this.id = data.id;
				this.name = data.name;
				this.phone = data.phone;
				this.address = data.address;
				this.pickerText = data.area;
				if(data.is_default == 2){
					this.acquiesce = true;
				}else{
					this.acquiesce = false;
				}
				
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			openAddres() {
				
			},
			openAddres2() {
				let arr = []
				if(this.pickerText != "所在地区"){
					arr = this.pickerText.split("-");
					// 根据 label 获取
					var index = this.$refs.simpleAddress.queryIndex(arr, 'label');
					console.log(index);
					this.cityCode = index.value;
					this.$refs.simpleAddress.open();
				}else{
					this.pickerValueDefault = [0,0,0]
					this.$refs.simpleAddress.open();
				}
			},
			onConfirm(e) {
				console.log(e)
				this.pickerText = e.label;
				this.provinceCode = e.provinceCode;
				this.cityCode = e.cityCode;
				this.areaCode = e.areaCode;
			},
			switchChange(e) {
				this.acquiesce = e.target.value;
			},
			save(){
				let is_default = 2;
				if(!this.acquiesce){
					is_default = 1;
				}
				if(this.name == "") {
					uni.showToast({
						title: "请输入姓名",
						icon: "none",
					})
					return false
				}
				if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone))) {
					uni.showToast({
						title: "手机号错误",
						icon: "none",
					})
					return false
				}
				if(this.address == "") {
					uni.showToast({
						title: "请输入详细地址",
						icon: "none",
					})
					return false
				}
				if(this.id){
					editAddress(this.id, this.name, this.phone, this.provinceCode, this.cityCode, this.areaCode, this.pickerText, this.address, is_default).then(res=>{
						console.log(res)
						if(res.result == 0){
							uni.redirectTo({
								url: "myAddress"
							})
						}
					})
				}else{
					addAddress(this.name, this.phone, this.provinceCode, this.cityCode, this.areaCode, this.pickerText, this.address, is_default).then(res=>{
						console.log(res)
						if(res.result == 0){
							uni.redirectTo({
								url: "myAddress"
							})
						}
					})
				}
			},
		},
		components: {
			simpleAddress
		},
	}
</script>

<style lang="scss" scoped>
.margin{
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0 30rpx;
	.form {
		overflow: hidden;
		border-radius: 20rpx;
		margin-top:20rpx;
	}
	.row{
		background-color:#fff;
		padding: 30rpx;
		border-bottom: 2rpx solid #e1e1e1;
		font-size: 26rpx;
		color:rgba(84,54,54,1);
		.label{
			width: 160rpx;
			line-height: 48rpx;
		}
		.input{
			height: 48rpx;
			line-height: 48rpx;
		}
		.grow{
			flex-grow: 1;
			height: 48rpx;
			line-height: 48rpx;
			&.unchoose{
				color: #777;
			}
		}
	}
}

.add{
	position: fixed;
	width: 180rpx;
	height: 72rpx;
	border-radius: 36rpx;
	left: 30rpx;
	bottom: 60rpx;
	background: rgba(214, 142, 127, 1);
	box-shadow: 5px 5px 10px rgba(189, 185, 166, 0.5);
	color: #fff;
	font-size: 26rpx;
	line-height: 72rpx;
	text-align: center;
	transform: translate(-50%);
	left:50%;
}
</style>
